<template>
 <div id="slotZbdtRecommed">
    <ul>
        <!-- DT电台选项卡  -->
        <li :class="{DT:items.type=='1',PH:items.type=='2'||'4',SX:items.type=='3'}" v-for="(items,index) in data" :key="index">
            <img :src="items.cover" alt="">
            <span v-if="items.type=='1'" class="Left-s">付费精品</span>
            <span v-if="items.type=='1'" class="title">{{items.title}}</span>
           
            <span v-if="items.type=='4'">{{items.title2||items.title}}</span>
            <div class="bf" v-if="items.type=='2'||'4'">
                <span class="iconfont">&#xe60f;</span>
            </div>
             <!-- type==3 -->
            <div style="justify-content: center;
            align-items: center;display: flex;    padding-right: 15px;">
                 <span>{{items.title2||items.title}}</span>
            <div class="SingerRightIcon" v-if="items.type=='3'">
                
                <span class="iconfont">
                    &#xe699;
                </span>
            </div>
            </div>
        </li>
       
    </ul>
 </div>   
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    props:{
        data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
     mounted() {
            console.log(this.data)
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.ttf?t=1658501073558') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon3/iconfont.ttf?t=1658501961955') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#slotZbdtRecommed{
div,span,ul,li,img{
    font-size: 0;
}
// margin: 10px;
    box-sizing: border-box;
    overflow: hidden;
    ul{
            display: flex;
            flex-flow: wrap;
            width: 100%;

// DT->li
        .DT{
            position: relative;
      @media (min-width: 1100px) {
    flex: 0 0 20%;
    max-width: 20%;
} 
@media (min-width: 1800px) {
    flex: 0 0 16.6%;
    max-width: 16.6%;
} 
       margin-bottom: 25px;
       .Left-s{
        background: #EC4141;
        color: white;
        position: absolute;
        margin-top: 0;
        top: 0;
        padding: 4px;
        border-radius: 0 0 6px 0;
       }
        img{
            width: 1.145833rem /* 220/192 */;
            height:1.145833rem /* 220/192 */;
            border-radius: 5px;
        }
        .title{
            color: white;
            position: absolute;
            left: 5px;
            top: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 80%;
            top: 180px;
        }
            
           span{
             font-size: 16px;
             display: block;
             margin-top: 5px;
                         overflow: hidden;//溢出隐藏
    text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。
    white-space: nowrap;//文字不换行
    width: 85%;
           }
        }

        // DT->li
        .PH{
            position: relative;
        width: 20%;
       margin-bottom: 25px;
       .Left-s{
        background: #EC4141;
        color: white;
        position: absolute;
        margin-top: 0;
        top: 0;
        padding: 4px;
        border-radius: 0 0 6px 0;
       }
        img{
           width: 90%;
            border-radius: 5px;
        }
        .title{
            color: white;
            position: absolute;
            left: 5px;
            top: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 80%;
            top: 180px;
        }
            
           span{
             font-size: 16px;
             display: block;
             margin-top: 5px;
              overflow: hidden;//溢出隐藏
    text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。
    white-space: nowrap;//文字不换行
    width: 85%;
           }
        .bf{
            
        position: absolute;
    top: 45%;
    width: 52px;
    height: 52px;
    left: 47%;
    transform: translate(-60%,-39%);
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
            span{
                font-size: 30px;
                color: #EC4141;
                margin-top: 0px !important;

            }
        }
        }
    .PH:hover{.bf{
        display: flex;}
    }

     .SX{
            position: relative;
        width: 16.6%;
       margin-bottom: 25px;
       box-sizing: border-box;
       .Left-s{
        background: #EC4141;
        color: white;
        position: absolute;
        margin-top: 0;
        top: 0;
        padding: 4px;
        border-radius: 0 0 6px 0;
       }
        img{
           width: 90%;
            border-radius: 5px;
        }
        .title{
            color: white;
            position: absolute;
            left: 5px;
            top: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 80%;
            top: 180px;
            
        }
            
           span{
                 font-size: 17px;
    display: block;
    margin-top: 5px;
    font-weight: 500;
       display: inline-block;
       width:83%
           }
        .SingerRightIcon{
            background:#ED4241;
            display: flex;
                width: 22px;
    height: 22px;
    border-radius: 22px;
    text-align: center;
    justify-content: center;
    align-items: center;
            span{
                font-size: 17px; 
                color: white;
                margin-top: 0 !important;
            }
        }
        }

    }
    
   }
   
 

</style>